<!--
 * @Author: your name
 * @Date: 2021-04-16 21:21:27
 * @LastEditTime: 2021-04-18 15:36:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xmall_vue\src\pages\Pay\index.vue
-->
<template>
  <div class="PayContainer">
    <!-- 上半部分地址 -->
    <div class="top-box">
      <!-- 标题 -->
      <div class="title">
        <h2>收货信息</h2>
      </div>
      <!-- 地址 -->
      <div class="address">
        <el-card>
          <ul class="address-l">
            <li class="address-l-l">
              <p>收货人</p>
              <p>地址</p>
              <p>手机号</p>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
    <!-- 下半部分商品 -->
    <div class="bottom-box">
      <!-- 标题 -->
      <div class="title">
        <h2>购物清单</h2>
      </div>
      <!-- 商品信息 -->
      <div class="listContainer">
        <!-- 表格上部 -->
        <div class="cartTableTop">
          <!-- 表头 -->
          <div class="cartTitle">
            <span class="name">商品信息</span>
            <span class="operation">操作</span>
            <span class="smtotal">小计</span>
            <span class="num">数量</span>
            <span class="onePrice">单价</span>
          </div>
          <!-- 表格列表 -->
          <div class="cartList"
               v-if="produce.detail">
            <div class="cartItem">
              <div class="itemImg">
                <img :src="produce.productImageBig"
                     alt="" />
              </div>
              <div class="itemName">
                <span>{{produce.productName}}</span>
              </div>
              <div class="opreation">
                <a href="javascript:;"
                   class="itemDeleteBtn"
                   @click="deteleProduct"></a>
              </div>
              <div class="itemPriceNum">
                <div class="smtotal">￥{{totalPrice}}</div>
                <div class="itemAddDown">
                  <span size="mini">{{Num}}</span>
                </div>
                <div class="onePrice">￥{{produce.salePrice}}</div>
              </div>
            </div>
          </div>
          <div v-else
               class="title">
            <router-link to='/allcategory'>暂无商品 去选购 ></router-link>
          </div>
        </div>
        <!-- 表格底部 -->
        <div class="cartTableBottom">

          <div class="bottomRight">
            <div class="totalPrice">
              <h4>应付总额：<i>￥ {{totalPrice?totalPrice:'0'}}</i></h4>
              <h5>应付总额不含运费</h5>
            </div>
            <el-button type="primary"
                       class="paybtn"
                       @click="toPayInfo">提交订单</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Pay',
  data () {
    return {
      totalPrice: '',//商品总价
      Num: '',//商品数量
      goodsId: '',//商品Id
    }
  },
  beforeMount () {
    let { goodsId, num, totalPrice } = this.$route.query
    this.totalPrice = totalPrice
    this.Num = num
    this.goodsId = goodsId
  },
  mounted () {
    // console.log(this.$route)
    this.getDetailData()
  },
  methods: {
    //发送请求
    getDetailData () {
      // console.log(this.goodsId)
      this.$store.dispatch('getDetailData', this.goodsId)
    },
    //删除
    async deteleProduct () {
      const result = await this.$store.dispatch('deteleProduct', this.goodsId)
      this.totalPrice = ''

    },
    // 点击去到payInfo
    toPayInfo () {
      this.$router.push({
        path: '/payinfo',
        query: {
          goodsId: this.goodsId,
          Num:this.Num,
          totalPrice:this.totalPrice,
          name:this.orderList.productName,
          price:this.orderList.salePrice
        }
      })
    }
  },
  computed: {
    ...mapState({
      produce: state => state.detail.detail
    }),
  }

}
</script>

<style lang="less" scoped>
.PayContainer {
  width: 1220px;
  margin: 0 auto;
  height: 200px;
  .top-box {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .title {
      padding-left: 30px;
      position: relative;
      z-index: 10;
      height: 60px;
      padding: 0 10px 0 24px;
      border-bottom: 1px solid #d4d4d4;
      border-radius: 8px 8px 0 0;
      box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
      background: #f3f3f3;
      background: linear-gradient(#fbfbfb, #ececec);
      line-height: 60px;
      font-size: 18px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .address {
      width: 100%;
      height: 218px;
      background: #fff;
      .address-l {
        padding: 30px 13px 0;
        display: flex;
        .address-l-l {
          border-color: #6a8fe5;
          width: 25%;
          position: relative;
          background: #fff;
          p {
            line-height: 26px;
            text-align: center;
            font-size: 16px;
          }
        }
      }
    }
  }
  .bottom-box {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(236, 229, 229, 0.966);
    box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
    .title {
      padding-left: 30px;
      position: relative;
      z-index: 10;
      height: 60px;
      padding: 0 10px 0 24px;
      border-bottom: 1px solid #d4d4d4;
      border-radius: 8px 8px 0 0;
      box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
      background: #f3f3f3;
      background: linear-gradient(#fbfbfb, #ececec);
      line-height: 60px;
      font-size: 18px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .listContainer {
      /* 表格上 */
      .cartTableTop {
        /* 表头 */
        .cartTitle {
          position: relative;
          z-index: 1;
          line-height: 38px;
          height: 38px;
          padding: 0 0 0 30px;
          font-size: 12px;
          background: #eee;
          border-bottom: 1px solid #dbdbdb;
          border-bottom-color: rgba(0, 0, 0, 0.08);
          .name {
            float: left;
            text-align: left;
          }
          span {
            width: 137px;
            float: right;
            text-align: center;
            color: #838383;
          }
        }
        .title {
          text-align: center;
          line-height: 200px;
          padding: 20px 475px;
        }
        /* 表格列表 */
        .cartList {
          background-color: #fff;
          .cartItem {
            position: relative;
            height: 140px;
            margin-left: 74px;

            > div {
              float: left;
              &.itemChoose {
                position: absolute;
                left: -74px;
                top: 0;
                width: 74px;
                height: 20px;
                padding: 60px 0 0 31px;
                font-size: 12px;
                color: #999;
              }
              &.itemImg {
                position: relative;
                margin-top: 30px;
                overflow: hidden;
                width: 80px;
                height: 80px;
                img {
                  width: 80px;
                  height: 80px;
                }
              }
              &.itemName {
                width: 380px;
                margin-left: 20px;
                color: #323232;
                text-align: center;
                line-height: 20px;
                margin-top: 40px;
                span {
                  white-space: pre-wrap;
                }
              }
              &.itemPriceNum {
                float: right;
                overflow: hidden;
                > div {
                  float: right;
                  width: 137px;
                  text-align: center;
                  line-height: 100px;
                }
              }
              &.opreation {
                overflow: hidden;
                float: right;
                width: 137px;
                text-align: center;
                color: #666;
                line-height: 100px;
                vertical-align: middle;
                a {
                  display: block;
                  width: 24px;
                  height: 24px;
                  margin: 40px auto 0;
                  color: #c2c2c2;
                  background: url();
                  background-size: 100% auto;
                }
              }
            }
          }
        }
      }
      /* 表格底部 */
      .cartTableBottom {
        height: 90px;
        width: 100%;
        background-position: 50%;
        background: #fdfdfd;
        background: linear-gradient(#fdfdfd, #f9f9f9);
        border-top: 1px solid #e9e9e9;
        box-shadow: 0 -3px 8px rgb(0 0 0 / 4%);
        /* 全选 */
        .checkOperation {
          float: left;
          padding: 35px 26px;
          font-size: 12px;
          overflow: hidden;
          > div {
            float: left;
            &.checkAll {
              margin-right: 40px;
              input {
                margin-right: 4px;
              }
            }
            &.delete {
              height: 20px;
              line-height: 20px;
              cursor: pointer;
              width: 80px;
              text-align: center;
              border-radius: 5px;
              background-color: #d64321;
              color: #fff;
            }
          }
        }
        .bottomRight {
          float: right;
          overflow: hidden;
          > div {
            float: left;
            width: 160px;
            height: 40px;
            margin-top: 30px;
            > h4 {
              font-size: 16px;
              i {
                color: #d56781;
              }
            }
            &.num {
              float: left;
              width: 160px;
              height: 40px;
              text-align: right;
              padding-right: 20px;
            }
            &.totalPrice {
              text-align: left;
              padding-left: 20px;
              border-left: 2px solid #ededed;
            }
          }
          .paybtn {
            margin: 20px 20px 0 0;
            width: 100px;
            height: 50px;
          }
        }
      }
    }
  }
}
</style>
